<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            color: #f9ffff;
            font-size: 12px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 100%;
            background-image: url(./img/true.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .top {
            width: 100%;
            height: 8%;
            background-image: url(./img/title.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-size: 26px;
            font-weight: 550;
          
            text-align: center;
        }

        .bo {
            margin-top: 15px;
            width: 100%;
            height: 90%;
        }

        .nav {
            width: 300px;
            height: 30px;
            font-size: 13px;
            text-align: center;
            background-color: #2c58a6;
            line-height: 30px;
            margin-bottom: 20px;
            margin-left: 20px;
        }

        .content {
            margin-left: 10px;
            width: 100%;
            height: 90%;
            display: flex;
            justify-content: space-around;
        }

        .poa {
            position: absolute;
            top: -15px;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            height: 30px;
            text-align: center;
            background-color: #2c58a6;
            border-radius: 10px;
            line-height: 30px;
        }

        .poa img {
            width: 15px;
            height: 15px;
            vertical-align: middle;
        }

        .left,
        .right {
            width: 24%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .center {
            width: 50%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .btn {
            width: 97%;
            height: 30%;
            position: relative;
            background-image: url(./img/line1.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .c1 {
            width: 97%;
            height: 63%;
            position: relative;
            background-image: url(./img/line1.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        table {
            margin-top: 15px;
            text-align: center;
            width: 100%;
            font-size: 10px;
        }

        table thead {
            color: #4a9bb1;

        }

        table tr {
            height: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">物流大数据服务平台</div>
        <div class="nav">温馨提示：点击模块后跳转至详情界面</div>
        <div class="content">
            <div class="left">
                <div class="l1 btn">
                    <div class="poa"><img src="./img/t_1.png" alt="">湖南省货运收入</div>

                    <div class="l1a bo"></div>
                </div>
                <div class="l2 btn">
                    <div class="poa"><img src="./img/t_2.png" alt="">湖南省地图</div>
                    <div class="l2a bo"></div>
                </div>
                <div class="l3 btn">
                    <div class="poa"><img src="./img/t_6.png" alt="">湖南省飞机场</div>
                    <div class="l3a bo"></div>
                </div>
            </div>
            <div class="center">
                <div class="c1">
                    <div class="poa"><img src="./img/t_3.png" alt="">中国地图</div>
                    <div class="c1a bo"></div>
                </div>
                <div class="c2 btn" style="width: 47%; margin-right: 25px;">
                    <div class="poa"><img src="./img/t_7.png" alt="">湖南省交通</div>
                    <table>
                        <thead>
                            <tr>
                                <th>运营数（辆）</th>
                                <th>线路总长度（公里）</th>
                                <th>客运总量（万人次）</th>
                                <th>日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style=" background-color: #072951;">
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                            <tr style=" background-color: #072951;">
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                            <tr style=" background-color: #072951;">
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                        </tbody>
                    </table>


                </div>
                <div class="c3 btn" style="width: 47%;">
                    <div class="poa"><img src="./img/t_7.png" alt="">湖南省业务量</div>
                    <table>
                        <thead>
                            <tr>
                                <th>省内(万件)</th>
                                <th>省外(万件)</th>
                                <th>国际(万件)</th>
                                <th>总业务量(万件)</th>
                                <th>日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style=" background-color: #072951;">
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                            <tr style=" background-color: #072951;">
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                            <tr style=" background-color: #072951;">
                                <td>21059</td>
                                <td>56497</td>
                                <td>184448</td>
                                <td>184448</td>
                                <td>2018年</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="right">
                <div class="r1 btn">
                    <div class="poa"><img src="./img/t_4.png" alt="">湖南省货物周转</div>
                    <div class="r1a bo"></div>
                </div>
                <div class="r2 btn ">
                    <div class="poa"><img src="./img/t_5.png" alt="">湖南省高速公路</div>
                    <div class="r2a bo"></div>
                </div>
                <div class="r3 btn">
                    <div class="poa"><img src="./img/t_7.png" alt="">湖南省汽车</div>
                    <table>
                        <thead>
                            <tr>
                                <th>载客汽车(万辆)</th>
                                <th>载货汽车(万辆)</th>
                                <th>汽车拥有量量(万辆)</th>
                                <th>日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style=" background-color: #072951;">
                                <td>22</td>
                                <td>56</td>
                                <td>184</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>21</td>
                                <td>56</td>
                                <td>184</td>
                                <td>2017年</td>
                            </tr>
                            <tr style=" background-color: #072951;">
                                <td>29</td>
                                <td>57</td>
                                <td>184</td>
                                <td>2016年</td>
                            </tr>
                            <tr>
                                <td>21</td>
                                <td>57</td>
                                <td>188</td>
                                <td>2015年</td>
                            </tr>
                            <tr style=" background-color: #072951;">
                                <td>21</td>
                                <td>55</td>
                                <td>188</td>
                                <td>2014年</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>




        </div>




    </div>
</body>
<script src="./echarts.min.js"></script>
<script type="module">
    import zhongguo from './中国地图.js'
    import hunan from "./湖南省地图.js"
    console.log(hunan);
    var r1 = echarts.init(document.querySelector('.r1a'));
    var r1option;

    r1option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['铁路货运', '国家铁路货运', '地方铁路货运', '合资铁路货运', '公路货运', '水路货运']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2012年', '2013年', '2014年', '2015年', '2016年']
        },
        yAxis: [{
            type: "value",
            name: "亿公里",
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255,0.7)",
                },
            },
            nameTextStyle: {
                color: "rgba(255, 255, 255,0.7)",
                fontSize: 10,
                // lineHeight: 40,
                // padding: [0, 0, 0, -20],
            },
            splitLine: {
                show: false,
                lineStyle: {
                    // type: "dashed",
                    // color: "rgba(255, 255, 255,0.5)",
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    type: "solid",
                    color: "rgba(255, 255, 255,0.5)",
                },
            },
            axisTick: {
                show: false,
            },
        },],
        series: [
            {
                name: '铁路货运',
                type: 'line',
                stack: 'Total',
                data: [1200, 1320, 1010, 1340, 900, 2300, 2100]
            },
            {
                name: '国家铁路货运',
                type: 'line',
                stack: 'Total',
                data: [2200, 1802, 1091, 2304, 2900, 3300, 3100]
            },
            {
                name: '地方铁路货运',
                type: 'line',
                stack: 'Total',
                data: [1500, 2320, 2010, 1540, 1900, 3300, 4100]
            },
            {
                name: '合资铁路货运',
                type: 'line',
                stack: 'Total',
                data: [3200, 3320, 3010, 3340, 3900, 3030, 3200]
            },
            {
                name: '公路货运',
                type: 'line',
                stack: 'Total',
                data: [5200, 4320, 6001, 7304, 2900, 3030, 3020]
            },
            {
                name: '水路货运',
                type: 'line',
                stack: 'Total',
                data: [5200, 4320, 6001, 7304, 2900, 3030, 3020]
            }

        ]
    };
    r1.setOption(r1option)

    //半饼图

    var l1 = echarts.init(document.querySelector('.l1a'));
    var l1option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#fff',
                    borderWidth: 0
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                startAngle: 0,
                data: [
                    { value: 40, name: '4000万' },
                    { value: 38, name: '3800万' },
                    { value: 32, name: '3200万' },
                    { value: 30, name: '3000万' },
                    { value: 28, name: '2000万' },
                    { value: 26, name: '2600万' },
                    { value: 22, name: '1800万' },
                    { value: 18, name: '900万' },
                    {
                        value: 234, itemStyle: {
                            color: 'transparent'
                        }
                    }
                ]
            }
        ]
    };

    l1.setOption(l1option);

    //  湖南地图
    var l2 = echarts.init(document.querySelector('.l2a'));
    echarts.registerMap("hunan", hunan);
    var l2option = {
        geo: {
            type: "map",
            map: "hunan",
            label: {
                normal: {
                    show: true, // 省份名展示
                    color: "#000",

                },
                emphasis: {
                    show: false,
                },
            },
            itemStyle: {
                borderColor: "#8fe5f3", //描边颜色
                borderWidth:1
            },
            layoutSize: "95%",
            roam: true,
            selectedMode: "multiple",
            regions: [
                {
                    name: "张家界市",
                    itemStyle: {
                        areaColor: "#b0dfa5",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "常德市",
                    itemStyle: {
                        areaColor: "#c88473",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "益阳市",
                    itemStyle: {
                        areaColor: "#b59a9b",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "岳阳市",
                    itemStyle: {
                        areaColor: "#cd7f69",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "长沙市",
                    itemStyle: {
                        areaColor: "#ff4500",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "娄底市",
                    itemStyle: {
                        areaColor: "#89caf4",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "湘潭市",
                    itemStyle: {
                        areaColor: "#ff4500",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "衡阳市",
                    itemStyle: {
                        areaColor: "#cf7c64",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "郴州市",
                    itemStyle: {
                        areaColor: "#ada2aa",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "永州市",
                    itemStyle: {
                        areaColor: "#cae96e",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "邵阳市",
                    itemStyle: {
                        areaColor: "#e2663c",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "怀化市",
                    itemStyle: {
                        areaColor: "#e9f62d",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "湘西土家族苗族自治州",
                    itemStyle: {
                        areaColor: "#95d4dc",
                        color: "#b0dfa5",
                    },
                },
                {
                    name: "株洲市",
                    itemStyle: {
                        areaColor: "#ff4500",
                        color: "#b0dfa5",
                    },
                },
            ],
        },
        emphasis: {

            label: {
                color: "#000",
                show: true,
            },
        },
        layoutCenter: ["50%", "55%"],
    };
    l2.setOption(l2option);
    var l3 = echarts.init(document.querySelector(".l3a"));
    echarts.registerMap("机场", hunan);
    var geoCoordMap = {
        长沙黄花国际机场: [113.1315, 28.1148],
        衡阳南岳机场: [112.3706, 26.4326],
        常德桃花源机场: [111.3824, 28.5508],
        永州零陵机场: [111.3644, 26.2044],
        怀化芷江机场: [109.4159, 27.2629],
        张家界荷花国际机场: [110.2636, 29.0611],
    };
    var data = [
        { name: "长沙黄花国际机场", value: "" },
        { name: "衡阳南岳机场", value: "" },
        { name: "常德桃花源机场", value: "" },
        { name: "永州零陵机场", value: "" },
        { name: "怀化芷江机场", value: " " },
        { name: "张家界荷花国际机场", value: "" },
    ];

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value).concat(data[i].img),
                });
            }
        }
        return res;
    };

    const l3option = {
        layoutCenter: ["50%", "55%"],
        geo: {
            map: "机场",
            type: "map",
            zoom: 1.2,
            roam: true,
            showLegendSymbol: true,
            label: {
                color: "#05c2f8",
                normal: {
                    show: false,
                    color: "#05c2f8",
                },
                emphasis: {
                    show: true,
                    color: "#05c2f8",
                },
            },
            layoutSize: "80%",
            itemStyle: {
                normal: {
                    areaColor: {
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                            },
                        ],
                        globalCoord: false, // 缺省为 false
                    },
                    borderColor: "#8fe7f6", //线
                    shadowColor: "#092f8f", //外发光
                    shadowBlur: 20,
                },
                emphasis: {
                    areaColor: "#0a2dae", //悬浮区背景
                },
            },
        },

        series: [
            // 蓝色动画
            {
                name: "Top 5",
                type: "effectScatter",
                coordinateSystem: "geo",
                data: convertData(
                    data
                        .sort(function (a, b) {
                            return b.value - a.value;
                        })
                        .slice(0, 10)
                ),
                symbolSize: function (val) {
                    return 10;
                },
                showEffectOn: "render",
                rippleEffect: {
                    brushType: "stroke",
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: "{b}",
                        position: "right",
                        show: true,
                        color: "#05c2f8",
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#05C3F9",
                        shadowBlur: 20,
                        shadowColor: "#05C3F9",
                    },
                },
                zlevel: 1,
            },
            // 地图上红标识
            {
                name: "biao",
                type: "scatter",
                coordinateSystem: "geo",
                symbol: "pin",
                symbolSize: [30, 30],
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: "#05c3f9",
                            fontSize: 5,
                        },
                        formatter(value) {
                            return value.data.value[2];
                        },
                    },
                },
                itemStyle: {
                    // 标识颜色
                    normal: {
                        color: function (val) {
                            return "#d12e5f";
                        },
                    },
                },
                // 标识排序
                data: convertData(
                    data.sort(function (a, b) {
                        return b.value - a.value;
                    })
                ),
                showEffectOn: "render",
                rippleEffect: {
                    brushType: "stroke",
                },
                hoverAnimation: true,
                zlevel: 1,
            },
        ],
    };
    l3.setOption(l3option);
    
 
        var c1 = echarts.init(document.querySelector('.c1a'));
        var geoCoordMap = {
            上海: [118.8062, 31.9208],
            内蒙古: [110.3467, 41.4899],
            西安: [109.1162, 34.2004],
            北京: [116.4551, 40.2539],
            重庆: [107.7539, 30.1904],
            常州: [119.5313, 29.8773],
            福州: [119.4543, 25.9222],
            海口: [110.3893, 19.8516],
            成都: [104.07, 30.67],
            北海: [110.3893, 22.8516],
            长春: [123.4551, 44.2539],
        };

        var value = {
            常州: 10000,
            内蒙古: 10000,
            辽宁: 10000,
            西安: 10000,
            重庆: 10000,
            上海: 10000,
            福州: 10000,
            北京: 10000,
            湖南: 10000,
            海口: 10000,
            成都: 10000,
            北海: 10000,
            长春: 10000,
        };
        echarts.registerMap("china", zhongguo);
        var colors = "#c5f80e";
        var geoGpsMap = [112.982279, 28.19409];
        var year = ["内蒙古"];
        var mapData = [];
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                    });
                }
            }
            return res;
        };
        var categoryData = [];
        var barData = [];

        for (var key in geoCoordMap) {
            mapData.push({
                year: "成都",
                name: key,
                value: value[key] / 100,
                value1: value[key] / 100,
            });
        }

        mapData.sort(function sortNumber(a, b) {
            return a.value - b.value;
        });
        for (var j = 0; j < mapData.length; j++) {
            barData.push(mapData[j].value1);
            categoryData.push(mapData[j].name);
        }

        var convertToLineData = function (data, gps) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var toCoord = geoCoordMap[dataItem.name];
                var fromCoord = gps; //郑州
                //  var toCoord = geoGps[Math.random()*3];
                if (fromCoord && toCoord) {
                    res.push([
                        {
                            coord: fromCoord,
                            value: dataItem.value,
                        },
                        {
                            coord: toCoord,
                        },
                    ]);
                }
            }
            return res;
        };

        const c1option = {
           
            geo: {
                show: true,
                map: "china",
                roam: true,
                zoom: 1.6,
                center: [101.4038, 36.8207],
                // layoutSize:"90%",
                label: {
                    emphasis: {
                        show: false,
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: "rgba(147, 235, 248, 1)",
                        borderWidth: 1,
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, 
                        },
                        shadowColor: "rgba(128, 217, 248, 1)",
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10,
                    },
                    emphasis: {
                        areaColor: "#333",
                        borderWidth: 0,
                    },
                },
            },
            series: [
                //地图
                {
                    type: "map",
                    map: "china",
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: "#031525",
                            borderColor: "#FFFFFF",
                        },
                        emphasis: {
                            areaColor: "#2B91B7",
                        },
                    },
                    animation: false,
                },
                //地图点的动画效果
                {
                    name: "Top 5",
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    data: convertData(
                        mapData
                            .sort(function (a, b) {
                                return b.value - a.value;
                                console.log(a, b);
                            })
                            .slice(0, 1000)
                    ),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: "render",
                    rippleEffect: {
                        brushType: "stroke",
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: "{b}",
                            position: "right",
                            show: true,
                            color: colors,
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: colors,
                            shadowBlur: 10,
                            shadowColor: colors,
                        },
                    },
                    zlevel: 1,
                },
                //地图线的动画效果
                {
                    type: "lines",
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 4, //箭头指向速度，值越小速度越快
                        trailLength: 0.05, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: "arrow", //箭头图标
                        symbolSize: 4, //图标大小
                    },
                    lineStyle: {
                        normal: {
                            color: "#c5f80e",
                            width: 0.1, //尾迹线条宽度
                            opacity: 0.5, //尾迹线条透明度
                            curveness: 0.3, //尾迹线条曲直度
                        },
                    },
                    data: convertToLineData(mapData, geoGpsMap),
                },
            ],
        };
        c1.setOption(c1option);


     var r2 = echarts.init(document.querySelector(".r2a"));
        echarts.registerMap("gaosu", hunan);
        var geoCoordMap = {
            岳阳: [113.132855, 29.37029],
            张家界: [110.479921, 29.127401],
            常德: [111.691347, 29.040225],
            益阳: [112.355042, 28.570066],
            长沙: [112.982279, 28.19409],
            娄底: [112.008497, 27.728136],
            株洲: [113.151737, 27.835806],
            衡阳: [112.607693, 26.900358],
            郴州: [113.032067, 25.793589],
            永州: [111.608019, 26.434516],
            怀化: [109.97824, 27.550082],
            吉首: [112.46923, 27.237842],
            邵阳: [111.46923, 27.237842],
        };
        var data = [
            { name: "岳阳", value: 170 },
            { name: "常德", value: 170 },
            { name: "益阳", value: 170 },
            { name: "长沙", value: 170 },
            { name: "娄底", value: 170 },
            { name: "株洲", value: 170 },
            { name: "衡阳", value: 170 },
            { name: "郴州", value: 170 },
            { name: "永州", value: 170 },
            { name: "怀化", value: 170 },
            { name: "吉首", value: 170 },
            { name: "邵阳", value: 170 },
        ];
        var max = 480,
            min = 9; // todo
        var maxSize4Pin = 100,
            minSize4Pin = 20;

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                    });
                }
            }
            return res;
        };

        const r2option = {


            geo: {
                map: "gaosu",
                label: {
                    normal: {
                        show: false,
                        color: '#fff'
                    },
                    emphasis: {
                        show: false,
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: "rgba(147, 235, 248, 1)",
                        borderWidth: 0.4,
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                        shadowColor: "rgba(128, 217, 248, 1)",
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10,
                    },
                    emphasis: {
                        areaColor: "#389BB7",
                        borderWidth: 1,
                    },
                },
                roam: true,

            },
            series: [
                {
                    name: "light",
                    type: "scatter",
                    coordinateSystem: "geo",
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    itemStyle: {
                        normal: {

                            color: "#38984f",
                        },
                    },
                    label: {
                        normal: {
                            formatter: "{b}",
                            position: "right",
                            show: true,

                        },
                        emphasis: {
                            show: true,
                        },
                    },
                },
                {
                    name: "Top 5",
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    data: convertData(
                        data
                            .sort(function (a, b) {
                                return b.value - a.value;
                            })
                            .slice(0, 10)
                    ),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: "render",
                    rippleEffect: {
                        brushType: "stroke",
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            color: '#fff',
                            formatter: "{b}",
                            position: "right",
                            show: true,
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: "#38984f",

                        },
                    },
                    zlevel: 1,
                },
            ],
        };
        r2.setOption(r2option);

</script>

</html>